<template>
	<view class="earnest-money">
		<view class="u-flex u-row-between">
			<view class="u-flex" @click="shows.search = true">
				<view class="u-margin-right-8">筛选</view>
				<image src="@/static/img/icon_screen_supplier@2x.png"></image>
			</view>
			<view class="u-flex" @click="shows.type = true">
				<view class="u-margin-right-8">
					{{getStatusLabel(list,querys.type)}}
				</view>
				<image src="@/static/img/ico_arrowdown.png"></image>
			</view>
		</view>
		<view class="u-margin-top-16" v-if="tableData.length>0">
			<c-margin-item v-for="(item,index) in tableData" :key="index" :type="querys.type" :item="item"
				@change="handleSelect" />
		</view>
		<u-empty v-else src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			margin-top="160" text="您目前还没有数据～"></u-empty>
		<u-select v-model="shows.type" :list="list" @confirm="onTypeChange"></u-select>
		
		
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item v-if="querys.type === 0" label="销售申请单单号" :border-bottom="false">
						<u-search v-model="querys.innerId" height="72" :show-action="false"
							placeholder="请输入销售申请单单号"></u-search>
					</u-form-item>
					<u-form-item v-if="querys.type === 1" label="出口申请单号" :border-bottom="false">
						<u-search v-model="querys.innerId" height="72" :show-action="false"
							placeholder="请输入出口申请单号"></u-search>
					</u-form-item>
					<u-form-item>
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBD7F',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import cMarginItem from './components/c-margin-item.vue'
	import {
		getStatusLabel
	} from '@/utils/status.js'
	export default {
		components: {
			cMarginItem
		},
		data() {
			return {
				shows: {
					type: false,
					search:false
				},
				list: [{
					value: 0,
					label: '借款保证金'
				}, {
					value: 1,
					label: '出口保证金'
				}],
				querys: {
					current: 1,
					size: 10,
					type: 0
				},
				tableData: []
			}
		},
		onLoad(options) {
			if (options.type) {
				this.querys.type = options.type*1
			}
			if (options.innerId) {
				this.querys.innerId = options.innerId
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			onTypeChange(list) {
				this.$set(this, 'querys', {
					current: 1,
					size: 10,
					type: list[list.length - 1].value
				})
				this.getTableList()
			},
			async getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				let res;
				if (params.type === 0) {
					res = await that.$api.getMarginForBorrowing(params)
				} else if (params.type === 1) {
					res = await that.$api.getExportDeposit(params)
				}
				if (params.current === 1) {
					that.tableData = res.result.records
				} else {
					that.tableData = [...that.tableData, ...res.result.records]
				}
				uni.hideLoading();
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false
			},
			handleReset() {
				const type = this.querys.type
				this.querys = {
					current: 1,
					size: 10,
					type
				}
				this.getTableList()
				this.shows.search = false
			},
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}
	.earnest-money {
		padding: 10px 15px;
		color: #666666;
		font-size: 13px;

		.u-flex {
			&>image {
				width: 16px;
				height: 16px;
			}
		}

	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>